<template>
  <a-card>
    <ContentHeader />
    <div class="table-action">
      <a-button v-if="auth('add')" @click="add">新增管理员</a-button>
    </div>
    <a-table
      rowKey="admin_user_id"
      :columns="columns"
      :data-source="data.list"
      :pagination="{
        total: total,
        current: current,
        pageSize: pageSize,
      }"
      @change="handleTableChange"
    >
      <template #user_name="value">
        {{ value.record.user_name }}
      </template>
      <template #user_role="value">
        <a-tag color="green" v-if="value.record.is_super">超级管理员</a-tag>
        <template v-if="!value.record.is_super">
          <a-tag v-for="(item,key) in value.record.user_role" :key="key" color="default">
            {{item.name}}
          </a-tag>
        </template>
        
      </template>
      <template #status="value">
        <a-tag v-if="!value.record.status" color="green"><check-circle-outlined/></a-tag>
        <a-tag v-if="value.record.status" color="red"><close-circle-outlined/></a-tag>
      </template>
      <template #action="value">
        <a v-if="auth('edit')" @click="edit(value.record)">编辑</a>
        <a-divider v-if="value.record.admin_user_id != 1 && auth('delete')" type="vertical" />
        <a v-if="value.record.admin_user_id != 1 && auth('delete')" @click="deletes(value.record)"
          >删除</a
        >
      </template>
    </a-table>
    <addForm @okCallback="okCallback" ref="adds" />
    <editForm @okCallback="okCallback" ref="edits" />
  </a-card>
</template>
<script>
import { defineComponent, createVNode, reactive, toRefs } from "vue";
import { list, allTree, del } from "@/api/manage/User";
import { Modal } from "ant-design-vue";
import {
  ExclamationCircleOutlined,
  CheckCircleOutlined,
  CloseCircleOutlined,
} from "@ant-design/icons-vue";
import { notice,auth, refreshScrollTop } from "@/config";
import addForm from "./user/add";
import editForm from "./user/edit";
export default defineComponent({
  components: {
    addForm,
    editForm,
    CheckCircleOutlined,
    CloseCircleOutlined,
  },
  setup() {
    const columns = [
      {
        key: "admin_user_id",
        title: "管理员ID",
        dataIndex: "admin_user_id",
      },
      {
        key: "user_name",
        title: "登录名称",
        dataIndex: "user_name",
      },

      {
        key: "user_role",
        title: "所属分组",
        dataIndex: "user_role",
        slots: {
          customRender: "user_role",
        },
      },
      {
        key: "status",
        title: "冻结状态",
        dataIndex: "status",
        slots: {
          customRender: "status",
        },
      },
      {
        title: "创建时间",
        dataIndex: "create_time",
      },
      // {
      //   title: "更新时间",
      //   dataIndex: "update_time",
      // },
      {
        key: "action",
        title: "操作",
        slots: {
          customRender: "action",
        },
      },
    ];

    // 定义动态数据
    const state = reactive({
      data: [],
      adds: {},
      edits: {},
      current: 1,
      pageSize: 15,
      total: 0,
      allTrees: [],
    });

    // 获取数据
    const getTable = (where) => {
      list(where).then((res) => {
        state.data = res.data;
        state.total = res.data.total;
        state.pageSize = res.data.listRows;
      });
    };
    getTable([]);

    const menuTree = () => {
      allTree().then((res) => {
        state.allTrees = res.data;
      });
    };
    menuTree();

    // 分页查询
    const handleTableChange = (pag) => {
      state.current = pag.current;
      getTable({ page: pag.current });
      // 重置滚动高度
      refreshScrollTop();
    };

    // 新增菜单
    const add = () => {
      state.adds.show(state.allTrees);
    };
    // 编辑菜单
    const edit = (item) => {
      state.edits.show(state.allTrees, item);
    };

    // 删除菜单
    const deletes = (item) => {
      Modal.confirm({
        title: () =>
          "你真的要删除(名称:" +
          item.user_name +
          ",ID:" +
          item.admin_user_id +
          ")这条记录吗?",
        icon: () => createVNode(ExclamationCircleOutlined),
        content: () => "注意：确定删除后不可恢复",
        okText: () => "确定删除",
        okType: "danger",
        cancelText: () => "取消操作",
        onOk() {
          del({ admin_user_id: item.admin_user_id }).then((res) => {
            getTable();
            notice(res.status == 200 ? "success" : "error", res.message);
          });
        },
        onCancel() {},
      });
    };

    // 新增成功回调
    const okCallback = () => {
      getTable();
    };
    return {
      ...toRefs(state),
      columns,
      add,
      edit,
      deletes,
      okCallback,
      handleTableChange,
      auth,
    };
  },
});
</script>
<style scoped>
.popover-button {
  margin-right: 5px;
  padding: 0 5px;
  font-size: 12px;
}
</style>
